<!-- 顶部导航设置 -->
<template>
    <div>
        <div class="editor-title">
            <span class="editor-title__name">顶部导航设置</span>
        </div>
        <div class="editor-two">
            <!-- <div class="cls-between">
                <div class="editor-two__item-head">风格选择</div>
                <div class="cls-between">
                    <div class="item-con" :class="!pageData.navBar.hidden ? 'item-con-active' : ''" @click="clickStyle(1)">标准式</div>
                    <div class="item-con" :class="pageData.navBar.hidden ? 'item-con-active' : ''" @click="clickStyle(2)">沉浸式</div>
                </div>
            </div> -->
            <div class="editor-two__item">
                <div class="editor-two__item-head">导航标题</div>
                <el-input v-model="pageData.navBar.title" placeholder="输入店铺名称" clearable />
            </div>
            <div class="cls-between">
                <div class="editor-two__item-head">标题颜色</div>
                <div class="cls-between">
                    <div class="item-con" :class="pageData.navBar.color == '#000' ? 'item-con-active' : ''" @click="color_click('#000')">黑色</div>
                    <div class="item-con" :class="pageData.navBar.color == '#fff' ? 'item-con-active' : ''" @click="color_click('#fff')">白色</div>
                </div>
            </div>
            <!-- <div class="cls-between">
                <div class="editor-two__item-head">搜索框设置<span class="editor-head-span">沉浸风格下才能开启</span></div>
                <div class="cls-between">
                    <el-switch
                        v-model="pageData.navBar.search_switch"
                        width="62px"
                        size="large"
                        inline-prompt
                        active-text="开启"
                        inactive-text="关闭"
                        :disabled="!pageData.navBar.hidden"
                    />
                </div>
            </div> -->
            <div class="cls-between" v-if="pageData.navBar.hidden">
                <div class="editor-two__item-head">搜索框背景</div>
                <div class="cls-between">
                    <div class="item-con" :class="pageData.navBar.search_bg == '#fff' ? 'item-con-active' : ''" @click="search_bg_click('#fff')">
                        白色
                    </div>
                    <div class="item-con" :class="pageData.navBar.search_bg == 'none' ? 'item-con-active' : ''" @click="search_bg_click('none')">
                        透明
                    </div>
                </div>
            </div>
            <!-- <div class="cls-flex" style="padding: 1rem 0px">
                <div class="label-con" style="flex: 1">背景颜色<span class="editor-head-span">设置轮播图颜色后该属性失效</span></div>
                <div>
                    <el-color-picker show-alpha v-model="pageData.navBar.background" @change="color_change('background', '#fff')" />
                </div>
            </div> -->
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue"

/**
 * 顶部菜单设置
 * @property {Object} pageData  页面数据
 */
const props = defineProps({
    pageData: {
        type: Object,
        default: {
            title: "主页",
            navBar: {
                background: "#fff",
                color: "#000",
                // search_switch: false,
                // search_bg: "#fff",
                // hidden: false,
            },
        },
    },
})
onMounted(() => {
    
})

// 设置文字颜色
const color_click = (val) => {
    props.pageData.navBar.color = val
}

// 设置搜索框背景颜色
const search_bg_click = (val) => {
    props.pageData.navBar.search_bg = val
}

// 设置风格，1是标准，2是沉浸式
const clickStyle = (type) => {
    if (type == 1) {
        props.pageData.navBar.hidden = false
        props.pageData.navBar.search_switch = false
    }
    type == 2 && (props.pageData.navBar.hidden = true)
}

// 自定义背景色
const color_change = (key, color) => {
    if (!props.pageData.navBar[key]) {
        props.pageData.navBar[key] = color
    }
}
</script>

<style lang="less" scoped>
.editor-head-span {
    font-size: 12px;
    color: #999;
    margin-left: 10px;
}
.cls-between {
    height: 46px;
}

.item-con {
    color: #323232;
    padding: 7px 14px;
    border: 1px solid #ebedf0;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}
.item-con-active {
    color: #4b93fa !important;
    background-color: #edf4ff !important;
    border: 1px solid #4b93fa;
}
.editor-title {
    padding: 24px 16px;
}

.editor-two {
    padding: 12px 16px;
}

.editor-two__item {
    margin-bottom: 12px;
}

.editor-two__item-head {
    color: #333;
    line-height: 46px;
}

.editor-two__color {
    margin-top: 20px;
    width: 240px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.color-reset {
    font-size: 16px;
    color: #409eff;
    margin-right: 14px;
    cursor: pointer;
}
</style>
